<template>
  <div class="particle-background">
    <div 
      v-for="i in particleCount" 
      :key="i" 
      class="particle"
      :style="getParticleStyle(i)"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'

interface Props {
  particleCount?: number
  mouseInteraction?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  particleCount: 80,
  mouseInteraction: true,
})

const mouseX = ref(0)
const mouseY = ref(0)

// 生成粒子样式
const getParticleStyle = (index: number) => {
  const size = Math.random() * 4 + 2
  const left = Math.random() * 100
  const top = Math.random() * 100
  const animationDelay = Math.random() * 20
  const animationDuration = Math.random() * 10 + 15
  const opacity = Math.random() * 0.6 + 0.2
  
  // 创建颜色变化
  const hue = Math.random() * 60 + 200 // 蓝色到紫色范围
  const color = `hsl(${hue}, 70%, 60%)`
  
  return {
    width: `${size}px`,
    height: `${size}px`,
    left: `${left}%`,
    top: `${top}%`,
    backgroundColor: color,
    animationDelay: `${animationDelay}s`,
    animationDuration: `${animationDuration}s`,
    opacity: opacity,
    '--mouse-x': `${mouseX.value}px`,
    '--mouse-y': `${mouseY.value}px`,
  }
}

// 鼠标移动事件
const handleMouseMove = (event: MouseEvent) => {
  if (props.mouseInteraction) {
    mouseX.value = event.clientX
    mouseY.value = event.clientY
  }
}

onMounted(() => {
  if (props.mouseInteraction) {
    window.addEventListener('mousemove', handleMouseMove)
  }
})

const onUnmounted = () => {
  window.removeEventListener('mousemove', handleMouseMove)
}
</script>

<style scoped>
.particle-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(45deg, #0ea5e9, #3b82f6);
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
  animation: float-particle linear infinite;
  will-change: transform, opacity;
}

@keyframes float-particle {
  0% {
    transform: translateY(100vh) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-10vh) translateX(50px) rotate(360deg);
    opacity: 0;
  }
}

/* 鼠标交互效果 */
.particle:hover {
  transform: scale(1.5);
  box-shadow: 0 0 20px rgba(14, 165, 233, 0.8);
}

/* 深色模式适配 */
[data-theme="dark"] .particle {
  background: linear-gradient(45deg, #0ea5e9, #8b5cf6);
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
}

/* 移动端优化 */
@media (max-width: 768px) {
  .particle-background {
    display: none; /* 移动端隐藏粒子以提高性能 */
  }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
  .particle {
    animation: none;
    opacity: 0.3;
  }
}

/* 性能优化 */
@media (max-width: 1024px) {
  .particle:nth-child(n+41) {
    display: none; /* 在较小屏幕上显示更少粒子 */
  }
}
</style>